<template>
  <!-- 底部部分 -->
    <footer v-if="list.length>0" class="footer">
      <span class="todo-count"><strong>{{otherState}}</strong>剩余</span>
      <ul class="filters">
        <li>
          <a @click="filter('all')" :class="{selected:type==='all'}" href="#/">全部</a>
        </li>
        <li>
          <a @click="filter('active')" :class="{selected:type==='active'}" href="#/active">进行中</a>
        </li>
        <li>
          <a @click="filter('completed')" :class="{selected:type==='completed'}" href="#/completed">已完成</a>
        </li>
      </ul>
      <button v-if="isShow" @click="clear" class="clear-completed">清除已完成</button>
    </footer>
</template>

<script>
export default {
  props:{
    list:{
      type:Array,
      required:true,
    },
    type:String
  },
  // data(){
  //   // all 所有 active 进行中 completed已完成
  //   // return {
  //   //   type:'all',
  //   // }
  // },
  // 计算属性
  computed :{
    otherState(){
      return this.list.filter(item=>item.flag===false).length
    },
    isShow(){
      // return this.list.filter(item=>item.flag===true).length>0
      return this.list.some(item=>item.flag===true)
    }
  },
  methods:{
    clear(){
      this.$emit('clear')
    },
    filter (type) {
      this.$emit('changeType',type)
    }
  }
}
</script>

<style scoped>

</style>